<template>
  <chart :options="options" />
</template>

<script>
export default {
  name: "echartsPieAll",
  data() {
    return {
      center: ["50%", "48%"],
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isEntity: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    dimensions: {
      type: Array,
      default: () => {
        return null;
      },
    },
    max: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    options() {
      let option = {};
      if (this.isEntity) {
        option = {
          title: [
            {
              subtext: this.data.name,
              x: "center",
              bottom: "2%",
              textStyle: {
                color: "#fff",
                fontSize: 24,
                fontWeight: "normal",
              },
              subtextStyle: {
                color: "#fff",
                fontSize: 28,
                fontWeight: "normal",
              },
            },
          ],
          graphic: {
            elements: [
              {
                type: "image",
                style: {
                  image: this.data.icon,
                  width: 40,
                  height: 40,
                },
                left: "center",
                top: "30%",
              },
            ],
          },
          series: [
            {
              name: this.data.name,
              type: "pie",
              radius: ["35%", "45%"],
              center: this.center,
              hoverAnimation: false,
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                  position: "center",
                },
              },
              data: [
                {
                  value: this.data.value,
                  name: this.data.name,
                  itemStyle: {
                    color: this.data.color,
                  },
                },
                {
                  value: this.max - this.data.value,
                  name: "rose2",
                  itemStyle: {
                    color: "transparent",
                  },
                },
              ],
            },
            {
              name: this.data.name,
              type: "pie",
              z: 0,
              radius: ["35%", "50%"],
              center: this.center,
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                  position: "center",
                },
              },
              data: [
                {
                  value: 1,
                  itemStyle: {
                    color: "#434857",
                  },
                },
              ],
            },
          ],
        };
      } else {
        option = {
          title: [
            {
              subtext: this.data.name,
              x: "center",
              bottom: "35%",
              textStyle: {
                color: "#fff",
                fontSize: 26,
                fontWeight: "normal",
              },
              subtextStyle: {
                color: "#fff",
                fontSize: 26,
                fontWeight: "normal",
              },
            },
            {
              text: ((this.data.value / this.max) * 100).toFixed(1) + "%",
              x: "center",
              bottom: "-5%",
              textStyle: {
                color: this.data.color,
                fontSize: 30,
                fontFamily: "din",
                fontWeight: "normal",
              },
            },
            {
              text: this.data.value + "家",
              x: "center",
              bottom: "22%",
              textStyle: {
                color: "#fff",
                fontSize: 20,
                fontWeight: "normal",
              },
            },
          ],
          graphic: {
            elements: [
              {
                type: "image",
                style: {
                  image: this.data.icon,
                  width: 40,
                  height: 40,
                },
                left: "center",
                top: "25%",
              },
            ],
          },
          series: [
            {
              name: this.data.name,
              type: "pie",
              radius: ["65%", "75%"],
              center: this.center,
              hoverAnimation: false,
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                  position: "center",
                },
              },
              data: [
                {
                  value: this.data.value,
                  name: this.data.name,
                  itemStyle: {
                    color: this.data.color,
                  },
                },
                {
                  value: this.max - this.data.value,
                  name: "rose2",
                  itemStyle: {
                    color: "transparent",
                  },
                },
              ],
            },
            {
              name: this.data.name,
              type: "pie",
              z: 0,
              radius: ["65%", "66%"],
              center: this.center,
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                  position: "center",
                },
              },
              data: [
                {
                  value: 1,
                  itemStyle: {
                    color: this.data.color,
                  },
                },
              ],
            },
          ],
        };
      }
      return option;
    },
  },
  methods: {},
};
</script>

<style scoped>
</style>
